<!DOCTYPE html>
<html>
    <head>
        <title>scrollbar组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css">
        <script src="../../avalon.js"></script>
        <script src="../highlight/shCore.js"></script>
        <script>
            avalon.library("aoyou", {
                $ready: function () {
                    avalon.log("控件已经构建完毕")
                }
            })
            require(["./component/scrollbar/avalon.scrollbar"], function() {
                avalon.define({
                    $id: "test",
                    scrollbar: {
                        $id: "$bar",
                        show: "always",
                        showBarHeader: true
                    },
                    up: function() {
                        avalon.vmodels.$bar && avalon.vmodels.$bar.update()
                    },
                    data: avalon.range(1, 400),
                    $index: 2,
                    $skipArray: ["scrollbar"]
                })
                avalon.scan()
            })
        </script>
        <style type="text/css">
            .nobarbg .aoyou-scrollbar{
                background: transparent;
            }
        </style>
    </head>
    <body ms-controller="test" style="padding-bottom:0;padding-top:0;" class="">
        <aoyou:scrollbar config="scrollbar" data-scrollbar-position="right"></aoyou:scrollbar>
        <div class="aoyou-scrollbar-scroller aoyou-helper-reset">
            <h1>scrollbar-document.body带上下小箭头</h1>
            <p style="width:800px" ms-repeat="data" data-repeat-rendered="up" class="aoyou-helper-reset">left {{$index}} <span style="float:right;">right {{$index}} </span></p>
        <pre ms-skip class="brush:html;gutter:false;toolbar:false">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;scrollbar组件&lt;/title&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
        &lt;script src=&quot;../avalon.js&quot;&gt;&lt;/script&gt;
        
        &lt;script&gt;
            avalon.library("aoyou", {
                $ready: function () {
                    avalon.log("控件已经构建完毕")
                }
            })
            require(["./component/scrollbar/avalon.scrollbar"], function() {
                avalon.define({
                    $id: "test",
                    scrollbar: {
                        show: "always",
                        showBarHeader: true
                    },
                    up: function() {
                        avalon.vmodels.$bar && avalon.vmodels.$bar.update()
                    },
                    data: avalon.range(1, 400),
                    $index: 2,
                    $skipArray: ["scrollbar"]
                })
                avalon.scan()
            })
        &lt;/script&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            .nobarbg .aoyou-scrollbar{
                background: transparent;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body ms-controller=&quot;test&quot; style=&quot;padding-bottom:0;padding-top:0;&quot; class=&quot;aoyou-helper-reset&quot; data-scrollbar-position=&quot;right&quot;&gt;
        &lt;div class=&quot;aoyou-scrollbar-scroller aoyou-helper-reset&quot;&gt;
            &lt;h1&gt;scrollbar-document.body带上下小箭头&lt;/h1&gt;
            &lt;aoyou:scrollbar config="scrollbar" data-scrollbar-position="right"&gt;&lt;aoyou:scrollbar&gt;
            &lt;p style=&quot;width:800px&quot; ms-repeat=&quot;data&quot; data-repeat-rendered=&quot;up&quot; class=&quot;aoyou-helper-reset&quot;&gt;left {{$index}} &lt;span style=&quot;float:right;&quot;&gt;right {{$index}} &lt;/span&gt;&lt;/p&gt;
        
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
        </div>
    </div>
</body>
</html>
